<style>
    * {
        padding: 0px;
        margin: 0px;
    }

    .box {
        width: 800px;
        height: 500px;
        overflow: hidden;
        position: relative;

    }

    ul {
        list-style: none;
        position: absolute;
        bottom: 10px;
        left: 50%;
        margin-left: -60px;
    }

    ul li {
        float: left;
        width: 10px;
        height: 10px;
        background: #fff;
        border-radius: 50%;
        margin-right: 10px;
    }

    ul li.active {
        background: blue;
    }

    h1 {
        color: crimson;
        font-size: 100px;
    }
</style>
<h1>大好中国欢迎你</h1>
<div class="box box1">
    <img src="./imgs/p1.jpg" alt="">
    <ul>
        <li class="active"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

</div>
<script>
    // 每隔一秒切换图片

    // 1.1定时器外面定义全局变量num默认1
    let num = 1
    let t = null

    // setInterval(  ()=>{},毫秒)
    t = setInterval(() => {

        // 定时器里面-num+
        num++
        if (num > 7) num = 1
        // 定时器里面修改图片地址
        document.querySelector('.box1 img').src = `./imgs/p${num}.jpg`
        //定时器里面同步
        document.querySelector('.box1 li.active').className = ''
        let ulLiObjs = document.querySelectorAll('.box1 li')
        ulLiObjs[num - 1].className = 'active'
    }, 1500)
    function startLbt() 
    {
        // let t = setInterval(()=>{
    t = setInterval(()=>{
    // 定时器里面-num+
    num++
    if (num > 7) num = 1
    // 定时器里面修改图片地址
    document.querySelector('.box1 img').src = `./imgs/p${num}.jpg`
    //定时器里面同步
    document.querySelector('.box1 li.active').className = ''
    let ulLiObjs = document.querySelectorAll('.box1 li')
    ulLiObjs[num - 1].className = 'active'
}, 1500)
}
    startLbt()
    //鼠标移入到分页器 :至少得停止计时并且同步
    // 1 获取所有分页器
    let pageObjs = document.querySelectorAll('.box1 li')
    // 2 遍历
    pageObjs.forEach((item, i) => {
        // 3 绑定移入事件
        item.onmouseover = function () {
            // 4 清楚定时器
            clearInterval(t)
            // 5 同步图片
            document.querySelector('.box1 img').src = `./imgs/p${i + 1}.jpg`
            // 6 同步索引
            num = i + 1
            // 7 同步圆圈
            document.querySelector('.box1 li.active').className = ''
            document.querySelectorAll('.box1 li')[i].className = 'active'
        }

        // 鼠标移出重新开始定时器
        item.onmouseout = function () {
            startLbt()
        }
    })


</script>